<template>
  <div class="contain">
    <!-- 教育局首页 -->
    <div class="model">
      <el-row :gutter="42">
        <el-col :span="12" class="col">
          <CarouselModel></CarouselModel>
        </el-col>
        <el-col :span="12" class="col">
          <ItemModel
            :title="'工作动态'"
            :list="list"
            rowType="1"
            :linkTo="'/educationIndex/eduWorkAction'"
          ></ItemModel>
        </el-col>
        <el-col :span="12" class="col">
          <InfoOpenModel title="信息公开目录"></InfoOpenModel>
        </el-col>
        <el-col :span="12" class="col">
          <ItemModel :title="'通知公告'" :list="list" rowType="1"></ItemModel>
        </el-col>
        <el-col :span="12" class="col">
          <ItemModel
            :title="'招生考试信息'"
            :list="list"
            rowType="1"
          ></ItemModel>
        </el-col>
        <el-col :span="12" class="col">
          <ItemModel :title="'双公示'" :list="list" rowType="1"></ItemModel>
        </el-col>
        <el-col :span="24" class="col">
          <ItemModel
            :title="'招生考试信息'"
            :list="list"
            rowType="2"
          ></ItemModel>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import ItemModel from "./components/items-moel.vue";
import CarouselModel from "./components/carousel-model.vue";
import InfoOpenModel from "./components/info-open-model.vue";
export default {
  components: { ItemModel, CarouselModel, InfoOpenModel },
  data() {
    return {
      list: [
        {
          title: "经开区多措并举做好2020年春季学期开学准备工作",
          time: "2020-09-06"
        },
        {
          title: "经开区多措并举做好2020年春季学期开学准备工作",
          time: "2020-09-06"
        },
        {
          title: "经开区多措并举做好2020年春季学期开学准备工作",
          time: "2020-09-06"
        },
        {
          title: "经开区多措并举做好2020年春季学期开学准备工作",
          time: "2020-09-06"
        }
      ]
    };
  }
};
</script>

<style scoped lang="scss">
.contain {
  .model {
    padding: 47px 0 57px 0;
    width: 1600px;
    margin: 0 auto;
    .col {
      margin-bottom: 60px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>
